.loading {
  position: fixed;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;

  .box {
    padding: px2rem(20) px2rem(60);
    //background: rgba(255, 255, 255, .7);
    border-radius: 5px;

    > div {
      display: block;
      margin: 0 auto;
    }
  }

  span {
    display: block;
    margin-top: px2rem(20);
  }
}

.--download-container {
  text-align: center;

  .center {
    $fontColor: #999;
    span:first-child {
      color: $fontColor;
      display: inline-block;
      vertical-align: middle;
      line-height: px2rem(88);
    }

    .point {
      position: relative;
      display: inline-block;
      width: px2rem(5);
      height: px2rem(5);
      margin-left: px2rem(5);
      background: $fontColor;
      transition: .1s linear;
      opacity: 0;

      &.on {
        opacity: 1;
      }
    }
  }
}

.--loadable-state {
  overflow: hidden;

  .refresh {
    position: relative;
    text-align: center;
    display: block;
    line-height: px2rem(88);
    color: #fff;
    background: #007aff;
    margin: px2rem(112) px2rem(40) 0;
    border-radius: px2rem(20);
    transition: .1s linear;
    user-select: none;

    &[touch="active"] {
      background: darken(#007aff, 10%);
    }
  }
}